import React, {CSSProperties, FC, PropsWithChildren} from "react";
import {ScalePlate} from '@bastet/widgets'

interface IBuilderContainer {
  builderTool: FC<any>
  style: CSSProperties
}
export const BuilderContainer: FC<PropsWithChildren<IBuilderContainer>> = ({ style, builderTool: Tool, children }) => {
  const __style: CSSProperties = {
    position: 'relative',
    display: 'inline-flex',
    minWidth: '100%',
    minHeight: '100%',
    alignSelf: 'flex-start'
  }

  return (
    <div id="builder-container" className='builder-container' style={style}>
      <Tool/>
      <div className='builder-scroll'>
        <div style={{ ...__style, flexDirection: 'column' }}>
          <ScalePlate direction="horizontal"/>
          <div  style={ __style }>
            <ScalePlate direction="vertical"/>
            { children }
          </div>
        </div>
      </div>
    </div>
  )
}